<template>
  <view class="box">
    <navigator open-type="switchTab" url="/pages/classify/classify" v-if="isMore">
      <image class="img" src="https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20231023/1698029196280_8218.jpg" mode="aspectFill"></image>
      <view class="full-mask f fv fac fpc">
        <uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
        <text>更多</text>
      </view>
    </navigator>
    <navigator :url="'/pages/classifyList/classifyList?classify=' + encodeURIComponent(JSON.stringify(data))" v-else>
      <image class="img" :src="data.picurl" mode="aspectFill"></image>
      <view class="time">
        {{utils.compareTimeStamp(data.updateTime)}}前更新
      </view>
      <view class="mask f fac fpc">{{data.name}}</view>
    </navigator>
  </view>
</template>

<script setup>
  import utils from "@/utils/utils.js"
  const prop = defineProps({
    isMore: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  })
</script>

<style lang="scss" scoped>
.box {
  height: 340rpx;
  position: relative;
  border-radius: 10rpx;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .time {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20rpx;
    color: #fff;
    background-color: #cd7859;
    padding: 10rpx 14rpx ;
    border-bottom-right-radius: 10rpx;
  }
  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 28rpx;
    padding: 20rpx 0;
    backdrop-filter: blur(20rpx);
  }
  .full-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20rpx);
    font-size: 30rpx;
    color: #fff;
  }
}
</style>